<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>手机品牌搜索</h3>
    手机品牌:<input type="text" v-model="brand">
    {{brand}}


    <div v-bind:name="brand">
        <ul v-for="item in show" :key="item.type">
            <li>手机品牌：{{item.brand}}</li>
            <li>手机型号：{{item.type}}</li>
            <li>手机价格：{{item.price}}</li>
        </ul>
    </div>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            content:[
                {brand:'vivo',type:'vivox21',price:4999},
                {brand:'苹果',type:'iPhone13',price:7999},
                {brand:'OPPO',type:'oppo',price:4999},
                {brand:'vivo',type:'iqoo neo',price:2999},
                {brand:'华为',type:'华为 荣耀',price:5999},
                {brand:'小米',type:'小米6',price:1999},
            ],
            show:[],
            brand:'',
            name2:"13123"
        },
        watch: {
            brand: {
                handler: function() {
                    if (this.brand){
                        var found=false
                        this.content.forEach((value,index)=>{
                            if (value.brand===this.brand){
                                console.log(value)
                                found=value
                                this.show.push(found)
                            }
                        });

                    }else {
                        this.show=[]
                        return
                    }
                },
                deep: true
            }
        }

    })
</script>
</body>
</html>
